<template>
  <div class="p-2">
    <div class="flex justify-end mb-2">
      <a-button type="primary" size="small" @click="handleAdd"><template #icon>
          <PlusOutlined />
        </template>
        新增地址</a-button>
    </div>
    <List :grid="{ gutter: 16, xs: 2, sm: 2, md: 2, lg: 2, xl: 2, xxl: 2 }" :data-source="data">
      <template #renderItem="{ item }">
        <ListItem>
          <Card>
            <div class="flex items-center">
              <div class="address-info">
                <div class="flex">
                  <p class="mr-6 font-size-4 fw-600">{{ item.addressContactName }}</p>
                  <span>{{ item.addressTelephone }}</span>
                </div>
                <div>{{ item.addressLine1 }}</div>
              </div>
              <div class="flex flex-col">
                <a-button type="link" size="small" @click="handleEdit(item)">编辑</a-button>
                <Popconfirm title="确认删除该地址吗?" @confirm="handleDelete(item)">
                  <a-button type="link" danger size="small">删除</a-button>
                </Popconfirm>
                <!-- <a-button type="link" size="small" disabled>设为默认</a-button> -->
              </div>
            </div>
          </Card>
        </ListItem>
      </template>
    </List>
    <AddressDrawer @register="registerDrawer" @reload="getAddressData" />
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import { List, Card, Popconfirm } from 'ant-design-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import AddressDrawer from './AddressDrawer.vue';
import { useDrawer } from '@/components/Drawer';
import { getCustomerAddress, delCustomerAddress } from '@/api/customer';
const [registerDrawer, { openDrawer }] = useDrawer();
const props = defineProps({
  recordId: {
    type: String,
    default: '',
  },
});
//列表
const ListItem = List.Item;
//数据
const data = ref([]) as any;
watch(
  () => props.recordId,
  (v) => {
    getAddressData();
  },
);
const getAddressData = async () => {
  const { rows } = await getCustomerAddress({ addressCustomerId: props.recordId });
  data.value = rows.map((item) => {
    return {
      ...item,
      addressCountryId: item.addressCountryId.toString(),
    };
  });
};
//新增地址
function handleAdd() {
  openDrawer(true, { update: false, customerId: props.recordId });
}
// 修改地址
function handleEdit(record) {
  openDrawer(true, { update: true, record, customerId: props.recordId });
}
// 删除地址
async function handleDelete(record) {
  await delCustomerAddress([record.addressId]);
  getAddressData();
}
</script>
<style lang="less" scoped>
:deep(.ant-list-item) {
  padding: 12px 0;
}

.address-info {
  width: calc(100% - 87px);
}
</style>
